<!-- 报告报表 -->
<template>
  <div class="newTest">
    <div class="title" style="border-bottom: 1px solid #eee">报告报表</div>
    <div class="searchBox">
      <el-form
        label-position="top"
        inline
        size="mini"
        style="max-height: 100px"
      >
        <el-form-item>
          <p slot="label" class="miniLabel">报告类型</p>
          <el-select
            v-model="searchForm.searchType"
            placeholder="请选择报告类型"
          >
            <el-option
              v-for="item in reportTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p slot="label" class="miniLabel">开始时间</p>
          <el-date-picker
            v-model="searchForm.starttime"
            placeholder="选择开始时间"
            :clearable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <p slot="label" class="miniLabel">结束时间</p>
          <el-date-picker
            v-model="searchForm.lasttime"
            placeholder="选择结束时间"
            :clearable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <p class="searchBtns">
            <el-button type="primary" @click="getReportListFun">确定</el-button>
            <el-button
              type="primary"
              @click="addReportVisible = true"
              v-show="
                !userInfo.roles.includes('manager') &&
                !userInfo.roles.includes('environmentalDirector')
              "
              >新增</el-button
            >
          </p>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <mergeTable
      :tableData="setFormatList"
      :tableConfig="tableConfig"
      :attributes="{
        border: true,
        headerCellStyle: {
          backgroundColor: 'transparent',
        },
        cellStyle: {
          height: '50px',
          backgroundColor: 'transparent',
        },
        headerRowStyle: {
          backgroundColor: 'transparent',
        },
        rowStyle: {
          backgroundColor: 'transparent',
        },
      }"
    >
      <el-table-column slot="reportType" align="center" label="报告类型">
        <template slot-scope="{ row }">
          <div>
            <span v-if="row.reportType == 0">日报</span>
            <span v-else-if="row.reportType == 1">周报</span>
            <span v-else>水质异常情况报告</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column slot="file" align="center" label="文件">
        <template slot-scope="{ row }">
          <div class="loadWrap">
            <span>{{ row.file[0] }}</span>
            <div
              class="download"
              @click="handleAttachmentClick(row.file)"
              v-show="row.file[0]"
            >
              <i class="el-icon-download"></i>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column slot="enclosure" align="center" label="附件">
        <template slot-scope="{ row }">
          <div class="loadWrap">
            <span>{{ row.enclosure[0] }}</span>
            <div
              class="download"
              @click="handleAttachmentClick(row.enclosure)"
              v-show="row.enclosure[0]"
            >
              <i class="el-icon-download"></i>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column slot="generateStatus" align="center" label="处理状态">
        <template slot-scope="{ row }">
          <el-tag type="success" class="pointer" v-if="row.generateStatus"
            >已处理</el-tag
          >
          <el-tag
            type="danger"
            class="pointer"
            v-else
            @click="pendingAction(row.operation)"
            >待处理</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column
        slot="operation"
        align="center"
        label="操作"
        v-if="
          !userInfo.roles.includes('manager') &&
          !userInfo.roles.includes('environmentalDirector')
        "
      >
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row.$index, row.operation)"
            v-show="
              !userInfo.roles.includes('manager') &&
              !userInfo.roles.includes('environmentalDirector')
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </mergeTable>

    <v-paging @setCurrent="setPage" @setCurren="setNum" :total="total" />

    <!-- 新增弹出框 -->
    <el-dialog
      title="新增"
      :visible.sync="addReportVisible"
      width="30%"
      class="dialog"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="报告类型" prop="type">
          <el-select v-model="form.uploadType" placeholder="请选择报告类型">
            <el-option
              v-for="item in reportTypeAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报告日期" prop="type">
          <el-date-picker
            v-model="form.updateDate"
            type="daterange"
            :clearable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="*上传文件" prop="document">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="handlePreview"
            multiple
            :limit="1"
            :file-list="form.fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传附件" prop="attachment">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="handleChange"
            multiple
            :limit="1"
            :file-list="form.attachmentList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" id="dialog-footer">
        <el-button type="primary" @click="addAction">提交</el-button>
      </span>
    </el-dialog>

    <!-- 待处理弹窗 -->
    <el-dialog
      title="处理"
      :visible.sync="Pending"
      width="30%"
      class="dialog"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="*上传文件" prop="document">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="handlePreview"
            multiple
            :limit="1"
            :file-list="form.fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传附件" prop="attachment">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="handleChange"
            multiple
            :limit="1"
            :file-list="form.attachmentList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" id="dialog-footer">
        <el-button type="primary" @click="submitUpload">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getReportList,
  downloadDocument,
  wordAddAction,
  reportDelete,
  reportUpdate,
} from "@/http/api.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      total: 0,
      pageSize: 12,
      currentPage: 1,
      Pending: false, //待处理
      pendingData: "", //待处理编号
      searchForm: {
        searchType: "全部",
        starttime: this.$getLocalTime(
          new Date(new Date() - 3600 * 1000 * 24 * 7)
        ), //开始时间
        lasttime: this.$getLocalTime(new Date()), //结束时间
      },
      reportTypeList: [
        {
          value: 0,
          label: "日报",
        },
        {
          value: 1,
          label: "周报",
        },
        {
          value: 2,
          label: "水质异常情况报告",
        },
        {
          value: null,
          label: "全部",
        },
      ],
      reportTypeAdd: [
        {
          value: 0,
          label: "日报",
        },
        {
          value: 1,
          label: "周报",
        },
        {
          value: 2,
          label: "水质异常情况报告",
        },
      ],
      addReportVisible: false,
      form: {
        uploadType: "",
        updateDate: "",
        fileList: [], //上传文件
        fileList1: {}, //上传文件存储
        attachmentList: [], //附件
        attachmentList1: {}, //附件存储
      },
      rules: {
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
      },
      tableData1: [],
      tableData: [
        {
          reportType: "日报",
          reportTime: "2020/06/28",
          file: "文件1",
          enclosure: "附件1",
          generateTime: "2020/6/29 12:00:00",
          generateStatus: 0,
          operation: 0,
        },
        {
          reportType: "周报",
          reportTime: "2020/06/28",
          file: "文件2",
          enclosure: "附件2",
          generateTime: "2020/6/29 12:00:00",
          generateStatus: 1,
          operation: 1,
        },
      ],
      tableConfig: [
        { prop: "reportType", slot: "reportType" },
        { prop: "reportTime", label: "报告日期", align: "center" },
        { prop: "file", slot: "file", align: "center" },
        { prop: "enclosure", slot: "enclosure" },
        { prop: "generateTime", label: "报告生成时间", align: "center" },
        { prop: "generateStatus", slot: "generateStatus" },
        { prop: "operation", slot: "operation" },
      ],
      formList: [], //表格数据
    };
  },
  computed: {
    //处理数据格式
    setFormatList() {
      let formData = [];
      for (let i in this.formList) {
        formData.push({
          reportType: this.formList[i].reportType,
          reportTime:
            this.formList[i].reportDate.substring(0, 10) +
            " 至 " +
            this.formList[i].reportDate.substring(11),
          file: [this.formList[i].filename, this.formList[i].filepath],
          enclosure: [this.formList[i].annexname, this.formList[i].annexpath],
          generateTime: this.formList[i].gmtCreate,
          generateStatus: this.formList[i].reportStatus,
          operation: this.formList[i].reportId,
        });
      }
      return formData;
    },
    ...mapGetters({
      userInfo: "getUserInfo",
    }),
  },
  created() {
    this.getReportListFun();
  },
  methods: {
    //获取列表数据
    async getReportListFun() {
      const searchType =
        this.searchForm.searchType == "全部"
          ? null
          : this.searchForm.searchType;
      const params = {
        reportStarttime: this.searchForm.starttime,
        reportLasttime: this.searchForm.lasttime,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        reportType: searchType,
      };
      console.log("p", params);
      await getReportList(params).then((res) => {
        this.formList = res.data.data;
        this.total = res.data.total;
      });
    },
    //待处理
    pendingAction(data) {
      if (
        !this.userInfo.roles.includes("manager") &&
        !this.userInfo.roles.includes("environmentalDirector")
      ) {
        this.Pending = true;
        this.pendingData = data;
      }
    },
    //提交上传
    submitUpload() {
      this.Pending = false;
      let fd = new FormData();
      fd.append("reportId", this.pendingData);
      fd.append("file", this.form.fileList1);
      fd.append("annexFile", this.form.attachmentList1);
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      reportUpdate(fd, config).then((res) => {
        this.$notify({
          title: "成功",
          message: "上传成功！",
          type: "success",
        });
        this.getReportListFun();
        this.pendingData = "";
        this.form = {
          uploadType: "",
          updateDate: "",
          fileList: [], //上传文件
          fileList1: {}, //上传文件存储
          attachmentList: [], //附件
          attachmentList1: {}, //附件存储
        };
      });
    },
    //确认新增
    addAction() {
      let fd = new FormData();
      fd.append("file", this.form.fileList1);
      fd.append("annexFile", this.form.attachmentList1);
      fd.append("reportStarttime", this.form.updateDate[0]);
      fd.append("reportLasttime", this.form.updateDate[1]);
      fd.append("reportType", this.form.uploadType);
      const config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      wordAddAction(fd, config).then((res) => {
        this.addReportVisible = false;
        this.$notify({
          title: "成功",
          message: "新增成功！",
          type: "success",
        });
        this.getReportListFun();
        this.form = {
          uploadType: "",
          updateDate: "",
          fileList: [], //上传文件
          fileList1: {}, //上传文件存储
          attachmentList: [], //附件
          attachmentList1: {}, //附件存储
        };
      });
    },
    //上传文件
    handlePreview(file) {
      this.form.fileList1 = file.file;
    },
    //上传附件
    handleChange(file) {
      this.form.attachmentList1 = file.file;
    },
    //删除请求
    delAction(id) {
      reportDelete({ reportId: id }).then((res) => {
        this.getReportListFun();
      });
    },
    //删除文件
    handleDelete(index, id) {
      this.$confirm("确定要删除这条报告吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delAction(id);
          this.tableData.splice(index, 1);
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
        })
        .catch((err) => {});
    },
    //设置条数
    setNum(val) {
      this.currentPage = val;
      this.getReportListFun();
    },
    //设置页数
    setPage(val) {
      this.pageSize = val;
      this.getReportListFun();
    },
    //附件下载
    async handleAttachmentClick(scope) {
      const params = {
        fileName: scope[0],
        filePath: scope[1],
      };
      await downloadDocument(params, scope[0]); //参数1：数据、参数2：文件名称
    },
  },
};
</script>

<style scoped lang="scss">
.upload-demo {
  display: flex;
}
#dialog-footer {
  display: flex !important;
  justify-content: center;
}
.newTest .el-dialog .el-dialog__footer {
  display: flex !important;
  justify-content: center;
  color: red;
}
.newTest {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
  .loadWrap {
    display: flex;
    justify-content: space-between;
    .download {
      cursor: pointer;
      font-size: 2rem;
    }
    span {
      color: #87cefa;
    }
  }
  .title {
    position: relative;
    left: 15px;
    line-height: 70px;
    font-size: 16px;
  }
  .title::before {
    content: "";
    position: absolute;
    left: -15px;
    width: 4px;
    height: 20px;
    top: 25px;
    background-color: #2399ff;
  }
  .searchBox {
    padding: 20px 20px 0;
    margin-bottom: 20px;
    background-color: #fff;
    .miniLabel {
      line-height: 0;
    }
    .searchBtns {
      margin-top: 19px;
    }
  }
  .pointer {
    cursor: pointer;
  }
  .document {
    display: flex;
    align-items: center;
    color: #409eff;
  }
  .file-name {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .dataChartCnt {
    background-color: #fff;
    padding: 0 20px;
  }
}
.el-dialog {
  z-index: 3000 !important;
}
// .download {
//   height: 14px;
//   width: 14px;
//   background: url("/img/download.svg") no-repeat;
//   background-size: 100% 100%;
//   cursor: pointer;
//   margin-left: 5px;
// }
</style>
